<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>时钟案例</title>
</head>
<body>
    <div style="width:300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:100px;
    font-size: 50px;">
        <div id="clock" style="background-color:#f2dede; border: 3px solid black;">

                --:--:--


        </div>
        <div>
            <input type="number" id="input"/>
            <button onclick="timing()">开始计时</button>
            <button onclick="music()">关闭声音</button>
            <audio src="./music/2.ogg" id="music1"></audio>
        </div>


    </div>

    <script>
    function kakaca(){
//    获取现在时间
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();
        var s = date.getSeconds();
//拼接时间放到页面
        var time = h + ":" + m + ":" + s;
//    获取元素
        var clock = document.getElementById("clock");
//    放置文字
        clock.innerText = time;
    }
    kakaca();
    setInterval(kakaca,1000);
//        开始计时的方法
        function timing(){
//            获取输入的数值
            var inputs=document.getElementById("input");
//            获取输入框的值
            var time=inputs.value;

            setTimeout(mmmm,time);
        }


        function mmmm(){
            var a=document.getElementById('music1');
//            var url="./music/2.ogg";
//            a.setAttribute('src',url);
            a.load();
            a.play();

            alert("时间到")

    }
//    关闭声音
        function music(){
            document.getElementById('music1').pause();
        }


    </script>




</body>
</html>